<template>
  <div>
    <a-form-model
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      ref="ruleForm"
    >
      <a-form-model-item prop="mobile">
        <a-input v-model.trim="form.mobile" placeholder="手机号">
          <a-icon slot="prefix" type="phone" />
        </a-input>
      </a-form-model-item>

      <a-form-model-item prop="code">
        <div class="row_">
          <a-input v-model.trim="form.code" placeholder="验证码">
            <a-icon slot="prefix" type="code" />
          </a-input>

          <a-button
            type="primary"
            class="btn"
            @click="getCode"
            :disabled="isDisabled"
          >
            {{ codeTip }}
          </a-button>
        </div>
      </a-form-model-item>

      <a-form-model-item prop="password">
        <a-input
          v-model.trim="form.password"
          placeholder="新密码"
          type="password"
        >
          <a-icon slot="prefix" type="lock" />
        </a-input>
      </a-form-model-item>

      <a-form-model-item prop="repeatPassword">
        <a-input
          v-model.trim="form.repeatPassword"
          placeholder="确认新密码"
          type="password"
        >
          <a-icon slot="prefix" type="lock" />
        </a-input>
      </a-form-model-item>

      <a-form-model-item>
        <a-button
          class="loginbtn"
          type="primary"
          size="small"
          @click="handleReset"
          >重置密码</a-button
        >
      </a-form-model-item>

      <a-form-model-item>
        <a-button
          class="loginbtn"
          type="default"
          size="small"
          @click="handleCancel"
          >取消</a-button
        >
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { RE_PHONE } from "@/utils/constants";
// import md5 from "js-md5";
// import http from "@/api/login";

export default {
  props: {
    labelCol: {
      type: Object,
      required: true,
    },
    wrapperCol: {
      type: Object,
      required: true,
    },
  },
  data() {
    let checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        callback();
      }
    };
    let checkPass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.form.password !== this.form.repeatPassword) {
          callback(new Error("两次输入密码不一致"));
        } else {
          callback();
        }
      }
    };
    let checkMobile = (rule, value, callback) => {
      if (value === "") {
        this.isDisabled = true;
        callback(new Error("请输入手机号"));
      } else {
        if (!RE_PHONE.test(this.form.mobile)) {
          this.isDisabled = true;
          callback(new Error("请输入正确的手机号"));
        } else {
          this.isDisabled = false;
          callback();
        }
      }
    };

    return {
      form: {
        mobile: "",
        code: "",
        password: "",
        repeatPassword: "",
      },
      locked: false,
      isDisabled: true,
      time: 60,
      rules: {
        mobile: [
          {
            validator: checkMobile,
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "change" }],
        password: [{ required: true, validator: checkPass, trigger: "change" }],
        repeatPassword: [
          { required: true, validator: checkPass1, trigger: "change" },
        ],
      },
    };
  },
  computed: {
    codeTip() {
      if (!this.locked) {
        return "获取验证码";
      } else {
        return this.time + "秒";
      }
    },
  },
  methods: {
    getCode() {
      if (this.locked) return;

      if (!this.form.mobile) {
        this.$message.info("手机号不能为空");
        return;
      }

      this.locked = true;
      this.createTime();

      // http
      //   .sendSms({
      //     mobile: this.form.mobile,
      //   })
      //   .then(() => {
      //     this.$message.success("验证码已发送");
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //     this.$message.info("验证码发送失败");
      //     clearTimeout(this.time);
      //     this.locked = false;
      //     this.time = 60;
      //   });
    },
    createTime() {
      setTimeout(() => {
        this.time = this.time - 1;
        if (this.time === 1) {
          this.locked = false;
          this.time = 60;
        } else {
          this.createTime();
        }
      }, 1000);
    },
    handleReset() {
      // this.$refs.ruleForm.validate((valid) => {
      //   if (valid) {
      //     http
      //       .updatePass({
      //         code: this.form.code,
      //         mobile: this.form.mobile,
      //         newPassword: md5(this.form.password),
      //       })
      //       .then(() => {
      //         this.$message.success("密码重置成功！");
      //         this.handleCancel();
      //       })
      //       .catch((err) => {
      //         let msg = err.message;
      //         if (msg.indexOf("common error-") > -1) {
      //           this.$message.error(msg.replace("common error-", ""));
      //         } else {
      //           this.$message.error(err.message);
      //         }
      //       });
      //   } else {
      //     return false;
      //   }
      // });
    },
    handleCancel() {
      this.$emit("cancel");
      this.$refs.ruleForm.clearValidate();
    },
  },
};
</script>
<style scoped lang="less">
/deep/.ant-btn-primary {
  background-color: #1b69fd;
}

.row_ {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row nowrap;
  .btn {
    margin-left: 1rem;
    width: 102px;
  }
}
.loginbtn {
  width: 100%;
  height: 31.5px;
}
</style>
